<template>
    <!-- 该组件为回收预约中的已添加物品的组件 -->
    <view class="bogbox">
        <view class="userphone">
            <view class="header">
                <view><text>{{userArr.wp_name}}</text>
                    <image @click="changShow" src="../../static/img/myhome/fc-edit@3x.png" style="margin-left: 100rpx;"></image>
                    <image @click="changdel" src="../../static/img/myhome/fc-delete@3x.png"></image>
                </view>
            </view>
            <view class="main">
                <view>
                    <span>重量: {{userArr.weight}}</span>
                    <span>单价: {{userArr.unit_price}}元/{{userArr.unit == 0 ? 'KG' : '个'}}</span>
                </view>
                <span>备注: {{userArr.remsck}}</span>
            </view>
            <view class="img">
                <image v-for="item in userArr.imgs" :key="item" :src="item" @click="preview(item)"></image>
            </view>
        </view>
    </view>
</template>

<script>

    export default {
        components: {
        },
        props: {
            // userArr: Object,
            index: {
                type: Number,
                default: 0
            },
            userArr: {
                type: Object,
                default: {}
            },
        },
        data() {
            return {

            };
        },
        methods: {
            preview(url) {
                // 预览图片
                uni.previewImage({
                    urls: [url],
                    success: (res) => {},
                    fail: (err) => {}
                });
            },
            changShow() {
                this.$emit('showEtid');
            },
            changdel() {
                this.$emit('wpDelete', this.index);
            },
        }
    }
</script>

<style lang="scss" scoped>
    .userphone {
        background-color: #ffffff;
        border-radius: 20rpx;
        padding: 0 30rpx;
        line-height: 98rpx;
        margin-bottom: 30rpx;

        text {
            font-size: 32rpx;
            color: #ff4200;
        }

        .main {
            // height: 62rpx;
            width: 630rpx;
            border-top: 1px solid #EEEEEE;
            border-bottom: 1px solid #EEEEEE;
            
            view {
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
            }
            
            span {
                // width: 50%;
                margin-top: 17rpx;
                height: 23rpx;
                font-size: 24rpx;
                line-height: 23rpx;
                color: #999999;
                margin-right: 69rpx;
            }
        }

        .header {
            image {
                float: right;
                margin-top: 30rpx;
                width: 50rpx;
                height: 50rpx;
                margin-left: 20rpx;
            }
        }
    }

    .showeditgood {
        height: 100%;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        z-index: 998;
    }

    .img {
        margin-top: 21rpx;
        margin-bottom: 25rpx;
        
        image {
            background-color: #EEEEEE;
            width: 71rpx;
            height: 71rpx;
            margin-right: 26rpx;
            border-radius: 15rpx;
        }
    }

    // .colseshow {
    //     width: 750rpx;
    //     height: 700rpx;
    //     opacity: 0.5;
    //     background-color: #000000;
    // }
</style>
